<template>
    <!-- Dashboard -->
    <div class="page-container">
        <el-dialog title="实时路况" :visible.sync="dialogVisible" width="65%" :before-close="handleClose" center>
            <div>
                <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit
                    highlight-current-row style="height: 500px">
                    <el-table-column align="center" label="路口名称" prop="roadName"></el-table-column>
                    <el-table-column align="center" label="车流量" prop="trafficVolume"></el-table-column>
                    <el-table-column align="center" label="平均车速" prop="averageSpeed"></el-table-column>
                    <el-table-column align="center" label="是否畅通" prop="a">
                        <template slot-scope="scope">
                            <span>{{ scope.row.isPassable === 1 ? '是' : '否' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="记录时间" prop="recordTime"></el-table-column>
                </el-table>
                <div style="margin-bottom: 20px; text-align: center">
                    <!-- 页码改变和页数改变事件 -->
                    <el-pagination v-show="list" background layout="total, sizes, prev, pager, next, jumper"
                        :total="pageInfo.total" :current-page="pageInfo.currentPage" :page-sizes="[10, 20, 30, 40, 50]"
                        style="float: right" @current-change="currentPageChange" @size-change="sizeChange" />
                </div>
            </div>

        </el-dialog>


    </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getTmTrafficInfoPage } from "@/api/tm-road";

export default {
    name: "Dashboard",
    computed: {
        ...mapGetters(["name"]),
    },
    components: {
    },
    data() {
        return {
            dialogVisible: false,
            formData: {
                roadName: "",
            },
            dateRange: [],
            listLoading: false,
            list: [
                { a: '123' }
            ], // 列表数据
            pageInfo: {
                total: 0,
                currentPage: 1,
                pageSize: 10,
            },
            roadId: null,
        };
    },
    methods: {
        open(id) {
            this.roadId = id
            this.dialogVisible = true;
            this.fetchData()
        },
        handleClose() {
            this.dialogVisible = false
        },
        // 获取列表数据
        async fetchData() {
            this.listLoading = true;
            const params = {
                roadId: this.roadId,
                pageNum: this.pageInfo.currentPage,
                pageSize: this.pageInfo.pageSize,
            }
            const { code = undefined, items = {} } = await getTmTrafficInfoPage({ ...params })
            if (code === 200) {
                this.list = items.records;
                this.pageInfo.total = items.total
                setTimeout(() => {
                    this.listLoading = false
                }, 200)
            } else {
                this.$message.error('获取数据失败')
                this.listLoading = false
            }
        },
        // 页码改变事件
        currentPageChange(currentPage) {
            this.pageInfo.currentPage = currentPage;
            this.fetchData()
        },
        // 页数改变事件
        sizeChange(pageSize) {
            this.pageInfo.pageSize = pageSize;
            this.fetchData()
        }
    },
};
</script>

<style lang="scss" scoped>
.dashboard {
    &-container {
        margin: 30px;
    }

    &-text {
        font-size: 30px;
        line-height: 46px;
    }
}

p {
    margin: 0;
    padding: 0;
}

#clock {
    font-family: 'Share Tech Mono', monospace;
    color: #ffffff;
    text-align: center;
    color: #3F9EFF;
    text-shadow: 0 0 3px yellow;

    .time {
        letter-spacing: 0.05em;
        font-size: 20px;
        padding: 5px 0;
    }

    .date {
        letter-spacing: 0.1em;
        font-size: 18px;
    }

    .text {
        letter-spacing: 0.1em;
        font-size: 12px;
        padding: 20px 0 0;
    }
}
</style>